<template>
    <transition name="notification">
      <div class="notification" :style="{ bottom: `${position}px` }" :id="warnId">
        <span><svg-icon icon-class="warnRed" style="vertical-align: top;" /></span><span class="title">{{ message }}</span>
        <div class="warn">{{ content }}</div>

        <el-button type="text" @click="$emit('close',warnId);">
            忽略
        </el-button>
        <el-button type="text" class="noLog" @click="$emit('noWarn',warnId);">
            不再提示
        </el-button>
      </div>
    </transition>
  </template>
  
  <script>
  export default {
    props: ['message', 'position','content','warnId'],
    // mounted() {
    //   setTimeout(() => {
    //     this.$emit('close');
    //   }, 3000);
    // }
  };
  </script>
  
  <style lang="scss" scoped>
  .notification {
    position: fixed;
    right: 20px;
    bottom: 20px;
    padding: 10px 10px 0;
    background-color: #f4f7fb;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 300px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    
    .title {
        vertical-align: middle;
        font-size: 20px;
        color: #3c3e3e;
    }
    .warn {
        // margin-left: 50px;
        text-align: center;
        color: #9e9f9f;
        padding: 5px 0;
    }
    .noLog {
        float: right;
    }
  }
  
  .notification-enter-active,
  .notification-leave-active {
    transition: all 0.5s;
  }
  
  .notification-enter,
  .notification-leave-to {
    opacity: 0;
    transform: translateY(20px);
  }
  </style>